<template>
  <view class="container">
    <!-- 标签栏 -->
    <scroll-view class="tabs" scroll-x scroll-with-animation>
      <view 
        v-for="(tab, index) in tabs" 
        :key="index" 
        class="tab-item" 
        :class="{ 'active': activeTab === index }"
        @click="switchTab(index)"
      >
        {{ tab.title }}
      </view>
    </scroll-view>
    <!-- 内容区域 -->
    <view class="content">
      <view v-for="(tab, index) in tabs" :key="index" v-if="activeTab === index" class="tab-content">
        <view class="table-header">
          <view v-for="(header, colIndex) in tab.headers" :key="colIndex" class="table-header-cell">
            {{ header }}
          </view>
        </view>
        <view class="table-body">
          <view v-for="(row, rowIndex) in tab.data" :key="rowIndex" class="table-row">
            <view v-for="(cell, colIndex) in row" :key="colIndex" class="table-cell">
              {{ cell }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 0, // 当前激活的标签索引
      tabs: [
        {
          title: '标签1',
          headers: ['姓名', '年龄', '性别'],
          data: [
            ['张三', '20', '男'],
            ['李四', '22', '女'],
            ['王五', '25', '男']
          ]
        },
        {
          title: '标签2',
          headers: ['城市', '人口', '面积'],
          data: [
            ['北京', '2154万', '16410.54平方千米'],
            ['上海', '2428.14万', '6340.5平方千米'],
            ['广州', '1530.59万', '7434.4平方千米']
          ]
        },
        {
          title: '标签3',
          headers: ['水果', '价格', '产地'],
          data: [
            ['苹果', '5元/斤', '山东'],
            ['香蕉', '3元/斤', '海南'],
            ['橙子', '4元/斤', '江西']
          ]
        }
      ]
    };
  },
  methods: {
    // 切换标签的方法
    switchTab(index) {
      this.activeTab = index;
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
}

.tabs {
  white-space: nowrap;
  border-bottom: 1rpx solid #eee;
}

.tab-item {
  display: inline-block;
  padding: 20rpx 30rpx;
  font-size: 28rpx;
  color: #666;
}

.tab-item.active {
  color: #007AFF;
  border-bottom: 4rpx solid #007AFF;
}

.content {
  padding: 20rpx 0;
}

.tab-content {
  font-size: 28rpx;
  color: #333;
}

.table-header {
  display: flex;
  background-color: #f5f5f5;
  border-bottom: 1rpx solid #eee;
}

.table-header-cell {
  flex: 1;
  padding: 15rpx;
  text-align: center;
  font-weight: bold;
}

.table-body {
  border-bottom: 1rpx solid #eee;
}

.table-row {
  display: flex;
  border-bottom: 1rpx solid #eee;
}

.table-cell {
  flex: 1;
  padding: 15rpx;
  text-align: center;
}
</style>